<template>
    <ul class="history-list">
        <li class="item" v-for="item in list" >
            <span class="text" @click="selectItem(item)">{{item.name}}</span>
            <span class="icon" @click="deleteItem(item)"><i class="icon-delete"></i></span>
        </li>
    </ul>
</template>
<script>
    export default {
        name: 'history-list',
        props: {
            list: {
                type: Array,
                default: [],
            },
        },
        methods: {
            selectItem(item) {
                this.$emit('selectItem', item.name);
            },
            deleteItem(item) {
                this.$emit('deleteItem', item);
            },
        },
    };
</script>
<style lang="stylus" scoped>
    @import '~styl/var'
    .history-list
        .item
            display flex
            justify-content space-between
            height 40px
            align-items center
            font-size $font-size-medium
            color $color-text-d
            .text
                flex 1
</style>
